<template>
	<view class="screen">
		<input class="'uni-input''f500''s24'" v-model="screenVal" placeholder-style="color:#ccc;" placeholder="请输入名字或者电话" @blur="onblur" />
		<view class="screen_img">
			<image class="w100 h100" src="../../static/shopping/search.png" mode=""></image>
		</view>
		<view class="list_box w100" v-for="(item,index) in list" :key="index" @click="getReferrer(item.nickname,item.id)">
			<view class="list w100 flex">
				<view class="toux_box">
					<image class="img" :src="item.avatar" mode=""></image>
				</view>
				<view class="txt_box f500 s28 family">
					{{item.nickname}}&nbsp;&nbsp;&nbsp;({{item.mobile.slice(7,11)}})
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				screenVal: '',
				list: [],
				shopId: 0
			}
		},
		onLoad(option) {
			this.shopId = option.shopId
		},
		methods: {
			// 返回上一页携带参数
			getReferrer(name,id) {
				this.prePage().referrer(name, id);
				uni.navigateBack({})
			},
			// 获取搜索人列表
			getList() {
				let that = this
				that.$request({
					url: 'user/getReferrerList',
					method: 'POST',
					data: {
						shop_id: that.shopId,
						name: that.screenVal
					}
				}).then(res => {
					if (res.statusCode == 200) {
						that.list = res.data.data.data
					}
				})
			},
			onblur() {
				this.getList()
			}
		}
	}
</script>

<style scoped lang="scss">
	.screen{
		overflow: hidden;
		.uni-input {
			width: 608upx;
			height: 68upx;
			background: #FFFFFF;
			border-radius: 8upx 8upx 8upx 8upx;
			border: 2upx solid #333333;
			font-family: PingFang SC-Medium, PingFang SC;
			color: #000;
			padding-left: 78upx;
			margin: 20upx auto;
		}
		.screen_img {
			width: 40upx;
			height: 40upx;
			position: relative;
			left: 52upx;
			top: -74upx;
		}
		.list_box {
			margin-bottom: 20upx;
			.list {
				width: 686upx;
				height: 96upx;
				background-color: #F4F4F4;
				border-radius: 10upx;
				margin: 0 auto;
				.toux_box {
					width: 80upx;
					height: 80upx;
					margin-top: 7upx;
					margin-left: 10upx;
					.img {
						width: 80upx;
						height: 80upx;
						border-radius: 50%;
					}
				}
				.txt_box {
					color: #000000;
					line-height: 96upx;
					margin-left: 20upx;
				}
			}
		}
	}
</style>